<div class="page page-table" data-ng-controller="assetsCtrl">
    <div class="row">
        <div class="col-md-6">
            <ol class="breadcrumb">
                <li><a href="#/">Home</a></li>
                <li><a href="#/assets/">Assets</a></li>
                <li class="active"><a href="#/assets/{{data.id}}/">{{data.symbol}}</a></li>
            </ol>
        </div>
        <div class="col-md-6">
        </div>
    </div>


    <div class="row">

        <div class="col-md-3">
            <img alt="" src="{{data.image_url}}" class="img-circle" width="300" height="300">
        </div>

        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading"> Stats</div>
                <ul class="list-group">
                    <li class="list-group-item">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000">{{data.volume | number}}</span>
                        24 HS BTS Volume
                    </li>
                    <li class="list-group-item">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000">{{data.accumulated_fees | number}}</span>
                        Accumulated Fees
                    </li>
                    <li class="list-group-item">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000">{{data.holders | number}}</span>
                        Holders
                    </li>
                    <li class="list-group-item">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000"><a href='#/objects/{{data.dynamic_asset_data_id}}/'>{{data.dynamic_asset_data_id}}</a></span>
                        Dynamic Asset
                    </li>
                    <li class="list-group-item" ng-if="data.bitasset_data_id">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000"><a href='#/objects/{{data.bitasset_data_id}}/'>{{data.bitasset_data_id}}</a></span>
                        Bitasset Data
                    </li>
                </ul>
            </div>
            <h2>{{data.symbol}}</h2>
            <p>{{data.type}} - <a href='#/objects/{{data.id}}/'>{{data.id}}</a></p>
        </div>
        <div class="col-md-6">

            <div class="panel panel-default">
                <div class="panel-heading"> Additional Asset Information</strong></div>
                <ul class="list-group">
                    <li class="list-group-item">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000;">
                            {{ data.description | limitTo:50 }}
                                <span ng-if="data.long_description">
                                  <!--  ... <a target="_self" ng-click="scrollTo('fulldescription')" title="{{data.description}}" style="cursor: pointer;"> READ FULL</a> -->
                                </span>
                        </span>
                        Description
                    </li>
                    <li class="list-group-item">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000">{{data.max_supply | number}} {{data.symbol}}</span>
                        Max Supply
                    </li>
                    <li class="list-group-item">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000"><a href='#/accounts/{{data.issuer}}/'>{{data.issuer_name}}</a></span>
                        Issuer
                    </li>
                    <li class="list-group-item">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000">{{data.precision}}</span>
                    Presicion
                    </li>
                    <li class="list-group-item">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000">{{data.fee_pool | number}} {{data.symbol}}</span>
                        Fee Pool
                    </li>
                    <li class="list-group-item">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000">{{data.current_supply | number}} {{data.symbol}}</span>
                        Current Supply
                    </li>
                    <li class="list-group-item">
                        <span class="badge" style="background-color: #FFFFFF; color: #000000">{{data.confidential_supply | number}} {{data.symbol}} </span>
                        Confidential Supply
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Active Markets (in the last 24 hs)</h3>
        </div>
        <div class="panel-body">

            <div class="panel-body table-responsive">
                <form>
                    <div class="col-md-8">
                    </div>
                    <div class="form-group col-md-4">
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-search"></i></div>
                            <input type="text" class="form-control" placeholder="Search for a market" ng-model="search">
                        </div>
                    </div>
                </form>
                <table class="table">
                    <thead>
                    <tr>
                        <th ng-click='sortColumn("pair")' ng-class='sortClass("pair")'>Name</th>
                        <th class="align-right" ng-click='sortColumn("price")' ng-class='sortClass("price")'>Price</th>
                        <th class="align-right" ng-click='sortColumn("volume")' ng-class='sortClass("volume")'>Volume</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr data-ng-repeat="market in markets | orderBy:column:reverse | filter:search">
                        <td><a href='#/markets/{{market.pair}}/'>{{market.pair}}</a></td>
                        <td class="align-right">{{market.price | number}}</td>
                        <td class="align-right">{{market.volume | number}}</td>
                    </tbody>
                </table>
            </div>

        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Top Holders</h3>
        </div>
        <div class="panel-body">


            <div class="panel-body table-responsive">
                <form>
                    <div class="col-md-8">
                    </div>
                    <div class="form-group col-md-4">
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-search"></i></div>
                            <input type="text" class="form-control" placeholder="Search for a holder" ng-model="search2">
                        </div>
                    </div>
                </form>
                <table class="table">
                    <thead>
                    <tr>
                        <th ng-click='sortColumn2("account")' ng-class='sortClass2("account")'>Account</th>
                        <th class="align-right" ng-click='sortColumn2("amount")' ng-class='sortClass2("amount")'>Amount</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr data-ng-repeat="account in accounts | orderBy:column2:reverse2 | filter:search2">
                        <td><a href='#/accounts/{{account.id}}/'>{{account.name}}</a></td>
                        <td class="align-right">{{account.amount | number}}</td>
                    </tbody>
                </table>
            </div>


        </div>
    </div>

    <a name="fulldescription" id="fulldescription"></a>
    <div class="panel panel-default" ng-if="data.long_description">
        <div class="panel-heading">
            <h3 class="panel-title">Full description</h3>
        </div>
        <div class="panel-body">
            {{data.description}}
        </div>
    </div>

</div>
